<template>
    <div class="loading">
      <!-- 喝水中... -->

      <div style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh;">
        <div style="width: 400px;">
          <img src="../../../static/img/heshuiba.jpg" style="width: 100%; display: block;">
          <div style="border: 1px #ccc solid; margin-top: 20px; border-radius: 20px; overflow: hidden;" >
            <el-slider v-model="value3" :show-tooltip="false" @change="change" :class="value3 != 0?'act':''"></el-slider>
          </div>

        </div>


      </div>
    </div>
</template>




<script>

    export default {
        name: "apilist",
        data(){
            return{
              value3:0,
              loading:false
            }
        },
        created() {

        },
        mounted() {


        },
        methods:{
          change:function(){
            if(this.value3 == 100){
              //回去
            }else{
              this.value3 = 0
            }
          },

          godetail:function(id){
            this.$router.push({
              path:'/apidetail',
              query:{'id':id}
            })
          },

          //获取列表
          getlist:function(){
            var that = this
            axios.get('/api/plan-market/api/getapilist?page='+this.page+'&page_size='+this.pagesize+'&leibie='+this.leibie)
              .then(response => {
                if(response.data.msg.code == 0){
                  that.list = response.data.data.data
                  that.total = response.data.data.total
                  that.loading = false
                }else{
                  that.$message.error(response.data.msg.info);
                }
              })
          },
        }
    }
</script>

<style scoped lang="scss">
  .loading{
    /deep/ .el-slider__runway{ background: #fff; height: 40px; width: 90%; margin: 0;}
    /deep/ .el-slider__bar{ background: #00ec7f; height: 40px; width: 100%;}
    /deep/ .el-slider__button-wrapper{ height: 40px; width: 40px; top: 0; transform:translateX(0); }
    /deep/ .el-slider__button{ width: 40px; height: 40px; border-radius: 20px; background: #ff8888;  border: 0;}
    /deep/ .el-slider__button.dragging{ transform:translateX(0)}
    /deep/ .el-slider__button.hover{ transform:translateX(0)}
    /deep/ .el-slider__button:hover{ transform:translateX(0)}

    /deep/ .act .el-slider__button-wrapper{  background: linear-gradient(to right, #00ec7f 50%, white 0%);}
  }
</style>
